$(function (){
    // 加载商品列表数据并渲染
   $.ajax({
        url: '../js/goods.json',   //page4中的篮球鞋的
        type: 'get',
        dataType: 'json',
        success: function (data){  
            $.each(data,function (index,value){
                //localStorage.getItem(key):获取指定key本地存储的值
                if(value.id==localStorage.getItem("id")){
                var goods=`
                    <p>${value.p1}</p>
                    <h3>${value.title}</h3>
                    <p>${value.p2}</p>
                    <span>${value.price}</span>
                `
                var fang=`
                <ul class="divul">
                <li class='border'><img src="${value.imgurl01}"></li>
                <li><img src="${value.imgurl02}"></li>
                <li><img src="${value.imgurl03}"></li>
            </ul>
            <div class='leftbox'>
                <img src="${value.imgurl}">
                <div class='mark'></div>
            </div>
            <div class="rightbox">
                <img src="${value.imgurl}">
            </div> 
                `
            }
            $('.back2-box3a').html(goods)
            $('.div1').html(fang)
            })

            // 点击加入购物车
                $('.back2-box3').on('click','.addpro',function (){
                    // 本地存储数据结构：
                        // {'xxx01':2,'xxx04':1}
                        // [{'id':'xxx01','num':2},{'id':'xxx03','num':4}]

                    // 获取当前点击商品的id
                    var id = localStorage.getItem('id')
                    // 判断shid是否为空
                    if(!localStorage.getItem('shid')){
                        // 定义一个数组用于存储商品id
                            var shopid =[]
                    }else{
                        var shopid = JSON.parse(localStorage.getItem('shid'))
                    }
                    // 将商品id加入到数组
                    shopid.push({"id":id})
                    // 将商品id存储到本地存储
                    localStorage.setItem('shid',JSON.stringify(shopid))
                    // 'xxx02'
                    // // 遍历本地存储数据
                    // var flag = false//标记此商品是否在购物车中
                    // $.each(shopid,function (index,item){
                    //     if (item.id === id) {
                    //         item.num++
                    //         flag = true
                    //     }
                    // })
                    // if (!flag) {//购物车中没有此商品，则添加
                    //     shopid.push({'id':id,'num':1})
                    // }
                    // // 更新本地存储数据
                    // localStorage.setItem('goods',JSON.stringify(shopid))


                    // alert('加入购物车成功！')
                    location.href='page5.html'
                })
                //获取操作对象
            var leftBox=document.querySelector(".leftbox")
            var mark=document.querySelector(".mark")
            var rightBox=document.querySelector(".rightbox")
            var rightImg=rightBox.querySelector("img")

            //给左边盒子绑定鼠标移入事件
            leftBox.onmouseover=function(e){
                mark.style.display="block"
                rightBox.style.display='block'
            }
            //给左边盒子绑定鼠标移动事件
            leftBox.onmousemove=function(e){
                var e = e || window.event
                //获取遮藏层移动的距离
                var top1=e.pageY-leftBox.offsetTop-parseInt(mark.offsetHeight/2)
                var left1=e.pageX-leftBox.offsetLeft-parseInt(mark.offsetWidth/2)
                //设置边界条件
                var maxX=leftBox.offsetWidth-mark.offsetWidth
                var maxY=leftBox.offsetHeight-mark.offsetHeight

                //设置右边图片的移动距离
                var rightTop,rightLeft
                //水平方向
                if(left1<=0){
                    mark.style.left=0+'px'
                    rightLeft=0
                }else if(left1>=maxX){
                    mark.style.left=maxX+'px'
                    rightLeft=maxX
                }else{
                    mark.style.left=left1+'px'
                    rightLeft=left1
                }

                //垂直方向
                if(top1<=0){
                    mark.style.top=0+'px'
                    rightTop=0
                }else if(top1>=maxY){
                    mark.style.top=maxY+'px'
                    rightTop=maxY
                }else{
                    mark.style.top=top1+'px'
                    rightTop=top1
                }
                //让右边图片进行移动
                rightImg.style.top=-2*rightTop+'px'
                rightImg.style.left=-2*rightLeft+'px'
            }
            //给左边盒子绑定鼠标移出事件
            leftBox.onmouseout=function(){
                mark.style.display="none"
                rightBox.style.display='none'
            }
        }
    })
    $.ajax({
        url: '../js/page04.json',   //page4中的商品细节
        type: 'get',
        dataType: 'json',
        success: function (data){
            var strDom = ''
            $.each(data,function (index,item){
                var goods=`\
                <div class="back4-box1">
                <img src="${item.imgurl}" alt="">
                    </div>\
                `
                strDom += goods
            })
            $('.back4').html(strDom)
        }
    })

}) 
  
  



